<template>
    <div>
         <el-dialog
      title="广告详情"
      :visible.sync="dialogVisible"
      width="80%"
    
    >
        <el-row>
            <el-form :model="dvertiseList" ref="dvertiseList" :rules="rules"  label-width="140px" class="demo-ruleForm">
                <el-col :span="12">
                    <el-form-item label="广告名称" prop="name">
                         <el-input v-model="dvertiseList.name" placeholder="广告名称"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="备注" prop="note">
                         <el-input v-model="dvertiseList.note" placeholder="备注"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序" prop="sort">
                         <el-input v-model="dvertiseList.sort" placeholder="排序"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="产品数量" >
                         <el-input v-model="dvertiseList.productCount" placeholder="产品数量"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="链接" >
                         <el-input v-model="dvertiseList.url" placeholder="链接"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="首页轮播位置" >
                        <el-select v-model="dvertiseList.type" placeholder="请选择轮播位置">
                            <el-option label="app首页轮播" value="0"></el-option>
                            <el-option label="1" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="dvertiseList.startTime"
                            type="datetime"
                            placeholder="开始时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="结束时间" >
                         <el-date-picker
                            v-model="dvertiseList.endTime"
                            type="datetime"
                            placeholder="结束时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="上下线状态" >
                        <el-switch  v-model="dvertiseList.status" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="图片" >
                         <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :headers="uploadHeaders"
                            :on-success="handleAvatarSuccess"
                            >
                            <img style="width:150px;height:auto" v-if="dvertiseList.pic" :src="dvertiseList.pic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="adddvertiseList">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>
<script>
import mix from "@/mixin/index";
import market from "@/api/market/advertisement";
export default {
    mixins:[mix],
  data() {
    return {
        dialogVisible: false,
        //验证
         rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ]},
        //广告列表
        dvertiseList:{
            clickCount: 0,
            createTime: "",
            endTime: "",
            id: "",
            modifyTime: "",
            name: "",
            note: "",
            orderCount: 0,
            pic: "",
            productId: "",
            sort: 0,
            startTime: "",
            status: 0,
            type: 0,
            url: "",
            productCount:''
        },
          id:'',
    }
  },
  methods: {
      //新增
      setdvertise(){
        this.dialogVisible=true;
      },
      //从组件获取的id
    open(row){
        console.log(row)
        this.id=row.id
        this.dvertiseList=row;
        this.dialogVisible=true;
    },
      //大图上传成功的回调
      handleAvatarSuccess(res, file){
          console.log(res,file);
          if(res.success){
              this.dvertiseList.pic=res.data.fileUrl
          }else{
              this.$message.error("获取图片失败,请重新上传")
          }
      },

      //确定上传
      adddvertiseList(){
          console.log(this.dvertiseList);
            this.$refs.dvertiseList.validate((valid) => {
          if (valid) {
              if(this.id){
              console.log(this.id,"修改页面")
            this.$confirm('是否确认修改, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(this.dvertiseList);   
                    market.updateAds(this.dvertiseList).then(res=>{
                        console.log(res);
                        if(res.success){
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        this.dvertiseList=this.$options.data().dvertiseList
                        this.id="";
                        }else{
                            this.$message.error("修改广告失败")
                        }
                    })
                  
                    this.dialogVisible=false;
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
              
          }else{
              console.log(this.id,"新增广告")
            this.$confirm('是否确认新增广告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(this.dvertiseList);   
                    market.addAds(this.dvertiseList).then(res=>{
                        console.log(res);   
                        if(res.success){
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            });
                        }else{
                            this.$message.error("添加广告失败")
                        }
                    })
                    this.dialogVisible=false;
                }).catch(() => {
                  
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
             }
       
          } else {
            this.$message.error("你瞅瞅你又忘记必填项了吧")
            return false;
          }
        });
        
      }
  },
  created() {
   
  },
};
</script>